<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>透明不透明</title>
    <style>
    ul{
        width:600px;
        height:240px;
        margin:100px auto;
        padding:0;
        list-style: none
    }
     img{
         width:120px;
         height:120px;
         padding:0;
         margin:0;
         float:left;
         opacity:0.2;
     }
    </style>
</head>
<body>
    <ul>
        <img src="帅1.jpg" alt="#">
        <img src="帅2.jpg" alt="#">
        <img src="帅3.jpg" alt="#">
        <img src="帅4.jpg" alt="#">
        <img src="帅5.jpg" alt="#">
        <img src="帅6.jpg" alt="#">
        <img src="帅7.jpg" alt="#">
        <img src="帅8.jpg" alt="#">
        <img src="帅9.jpg" alt="#">
        <img src="帅10.jpg" alt="#">                      
    </ul>
    
</body>
</html>
<script>
    var p = document.querySelectorAll("img");
    console.log(p);
    for(var i=0;i<p.length;i++){
        p[i].index=i;
        p[i].onmouseover=function(){
          p[this.index].style.opacity=1;
        }
        p[i].onmouseout=function(){
        p[this.index].style.opacity=0.2;
        }
    }
</script>